<template>
  <div class="app-container">
    {{this.$route.params.id}}
    <el-form ref="form" :model="product" label-width="120px">
      <el-form-item label="商品名称">
        <el-input v-model="product.name" />
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="product.price" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleUpdate(product.id)">
          编辑
        </el-button>
      </el-form-item>

    </el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        "id": 111111111,
        "name": "HUAWEI P30",
        "images": "aaa",
        "price": 1003,
        "salePoint": "aabb",
        "typeId": null,
        "typeName": "精品",
        "flag": null,
        "createTime": 1614984552000,
        "updateTime": 1614984560000,
        "createUser": "1",
        "updateUser": "22"
      }
    }
  },
  created() {
    this.fetchDataById();

  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    fetchDataById(){
      var id = this.$route.params.id;
      var vm = this;

      this.axios({
        method:'GET',
        url:'http://127.0.0.1:8091/product/'+id
        }
      ).then(function(response) {
        vm.product = response.data.result

      })
    },
    handleUpdate(id) {
      alert(id)
    }

  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

